<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <!-- 
      在vue渲染的过程中 diff算法是一直在工作的,但是diff算法的比较是默认按照顺序依次比较的
      如果说我们逆序添加数据,则很可能diff算法的对比错位了
      所以我们在列表渲染的时候要添加一个唯一的key,diff算法的比较就变成了key对应的新旧虚拟DOM的比较
     -->
  <div id="app">
    <ul>
      <li v-for="item,index of obj">他是第几个:{{index+1}} 姓名是:{{item.name}};年龄是:{{item.age}};性别是:{{item.sex}}</li>
    </ul>
    <!-- 遍历字符串 item就是每一个字符 -->
    <ol>
      <li v-for="item of str">{{item}}</li>
    </ol>
    <!-- 遍历对象 item就是value index就是每一项的属性-->
    <ul>
      <li v-for="item,index of obj2">{{index}}--{{item}}</li>
    </ul>
    <!-- 遍历数字 就是遍历数字一直到对应的数字 一直+1 index仍是下标 -->
    <ol>
      <li v-for="item of num">{{item}}</li>
    </ol>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        obj: [
          { name: '罗飞', age: 20, sex: '男' },
          { name: '王远', age: 22, sex: '男' },
          { name: '胡家运', age: 18, sex: '男' }
        ],
        str: 'abcdefg',
        num: 12,
        obj2: {
          name: '罗飞',
          age: 20,
          sex: '男'
        }
      }

    }
  })
</script>

</html>